<template>
  <view class="content">
    <!-- 页面 -->
    <view class="content_box">
      <view class="back" :style="{top: statusBarHeight + 'px'}" @click="backClick()"></view>
      <view class="shake_box_title" :style="{top: statusBarHeight + 'px'}">幸运水果机</view>
      <!-- <view class="set" :style="{top: statusBarHeight + 'px'}" @click="setClick()"></view> -->
      <view class="shake_content" :style="{top: statusBarHeight+50 + 'px'}">
        <view class="shake_content_title">777奖池：{{jackpot}}</view>
        <view class="shake_content_border1" v-if="isLights % 2 == 0"></view>
        <view class="shake_content_border2" v-else></view>
        <!-- 抽奖一 -->
        <view class="shake_content_one">
          <view :class="'win_one_prize'+' '+'shake_move' + downOneValue">

          </view>
        </view>
        <!-- 抽奖二 -->
        <view class="shake_content_two" >
          <view :class="'win_one_prize'+' '+'shake_move' + downTwoValue">
          
          </view>
        </view>
        <!-- 抽奖三 -->
        <view class="shake_content_three">
          <view :class="'win_one_prize'+' '+'shake_move' + downThreeValue">
          
          </view>
        </view>
        <view class="card_content">
          <view v-for="(item,index) in cardTenList" :key="index" class="card_content_ten"
            :style="{'backgroundImage':'url('+ item.imgPath +')'}" @click="selectCardClick(item.id)">
            <view class="num_black" v-if="dataNumber[index] != 0">
              +{{dataNumber[index]}}
            </view>
          </view>
        </view>
        <view class="gold_content">
          <view v-for="(item,index) in goldNumberList" :key="index" class="gold_content_value"
            :style="{'color':selectGoldList.indexOf(item) !=-1 ? '#E9D385':'#ffffff'}" @click="selectGoldClick(item)">
            {{item}}
          </view>
        </view>
        <view class="howplay" @click="howPlayClick"></view>
        <view class="bottompour"
          :class="[bottomPourStatus == 1 ? 'bottompour1':bottomPourStatus == 2 ? 'bottompour2':bottomPourStatus == 3 ? 'bottompour3':'']"
          @click="bottomPourClick"></view>
        <view class="clean" @click="bottomPourClean"></view>
        <view class="footer_content">
          <view class="goldtotal">
            <text>您的余额：</text>
            <text class="highlight">{{balance}}</text>
          </view>
          <view class="goldwin">
            <text>本次输赢：</text>
            <text class="highlight">{{win}}</text>
          </view>
          <view class="goldwin" @click="winInfoClick">
            <text class="highlight">明细</text>

          </view>
        </view>
      </view>
    </view>
    <!-- 奖励弹窗 -->
    <u-popup :show="popuShow1" mode="center" :round="10" @close="popuShow1 = false" @open="open">
      <view class="popup_content">
        <view class="popup_content_top">奖励明细</view>
        <view class="popup_content_middle">
          <view class="content_item" v-for="(item,index) in populist" :key="index">
            <view class="left">
              <view class="picture" :style="{backgroundImage:'url('+ `${cardTenList[item.key].imgPath}` +')'}"></view>
              <view class="midddle">{{item.val.bet}}</view>
            </view>
            <view class="right">{{item.val.win}}</view>
          </view>
        </view>
        <view class="popup_content_bottom">
          <u-button class="bottom" type="error" size="small" text="确定" @click="popuShow1 = false"></u-button>
        </view>
      </view>
    </u-popup>
    <!-- 玩法弹窗 -->
    <u-popup :show="popuShow2" mode="center" :round="10" @close="popuShow2 = false" @open="open">
      <view class="popup_content">
        <view class="popup_content_top">玩法</view>
        <view class="popup_content_middle">
          <!-- v-for="(item,index) in populist" :key="index" -->
          <view class="content_item" v-html="desc">
            <!-- <view class="left">
							<view class="picture" :style="{backgroundImage:'url('+ `${cardTenList[item.key].imgPath}` +')'}"></view>
							<view class="midddle">{{item.val.bet}}</view>
						</view>
						<view class="right">{{item.val.win}}</view> -->
          </view>
        </view>
        <view class="popup_content_bottom">
          <u-button class="bottom" type="error" size="small" text="确定" @click="popuShow2 = false"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getTigerConfig,
    setTigerBet
  } from '@/api/mine/game.js'
  export default {
    data() {
      return {
        num: 0,
        statusBarHeight: 0,
        isLights: 0,
        cardTenList: [{
          id: 0,
          imgPath: require('../../../static/mine/shake/item0.png')
        }, {
          id: 1,
          imgPath:  require('../../../static/mine/shake/item1.png')
        }, {
          id: 2,
          imgPath:  require('../../../static/mine/shake/item2.png')
        }, {
          id: 3,
          imgPath:  require('../../../static/mine/shake/item3.png')
        }, {
          id: 4,
          imgPath:  require('../../../static/mine/shake/item4.png')
        }, {
          id: 5,
          imgPath:  require('../../../static/mine/shake/item5.png')
        }, {
          id: 6,
          imgPath:  require('../../../static/mine/shake/item6.png')
        }, {
          id: 7,
          imgPath:  require('../../../static/mine/shake/item7.png')
        }, {
          id: 8,
          imgPath:  require('../../../static/mine/shake/item8.png')
        }, {
          id: 9,
          imgPath:  require('../../../static/mine/shake/item9.png')
        }],
        selectCardList: [],
        selectGoldList: [],
        downOneValue: '',
        downTwoValue: '',
        downThreeValue: '',
        isMoveOne: false,
        isMoveTwo: false,
        isMoveThree: false,
        jackpot: '',
        goldNumberList: [],
        dataNumber: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

        balance: '', // 余额
        win: 0, // 输赢

        bottomPourStatus: 1, // 下注按钮状态
        popuShow1: false, //
        populist: [], // 弹窗1的数据
        popuShow2: false,
        max: '', // 没用上
        desc: '', // 玩法
      }
    },
    methods: {
      // 获取游戏初始信息
      init() {
        getTigerConfig().then(res => {
          this.jackpot = res.data.jackpot
          this.goldNumberList = res.data.number
          this.selectGoldList = []
          this.selectGoldList.push(this.goldNumberList[1])
          this.max = res.data.max
          this.desc = res.data.desc
          this.balance = res.data.balance
        })
      },
      // 选中水果卡片
      selectCardClick(id) {
        if (this.selectGoldList.length == 0) {
          this.$ui.toast('请选择硬币')
          return;
        }
        this.dataNumber[id] += ~~this.selectGoldList[0]
        console.log('this.dataNumber=', this.dataNumber);
      },
      // 选中金额
      selectGoldClick(id) {
        if (this.selectGoldList.indexOf(id) == -1) {
          this.selectGoldList = []
          this.selectGoldList.push(id); //选中添加到数组里
        } else {
          this.selectGoldList.splice(this.selectGoldList.indexOf(id), 1); //取消
        }
      },
      backClick() {
        uni.navigateBack()
      },
      // setClick() {
      //   console.log('点击设置');
      // },
      winInfoClick() {
        if (this.bottomPourStatus !== 3) return this.$ui.toast('请点击下注')
        this.popuShow1 = true
      },
      // 玩法
      howPlayClick() {
        this.popuShow2 = true
      },
      // 下注
      bottomPourClick() {
        if (this.bottomPourStatus !== 1) return this.$ui.toast('请点击清除按钮开始')
        if (this.selectGoldList.length == 0) return this.$ui.toast('请选择要下注的水果')
        let bool = this.dataNumber.some(item => item > 0)
        if (!bool) return this.$ui.toast('请选择要下注的水果')
        this.bottomPourStatus = 2
        this.isMoveOne = true
        this.isMoveTwo = true
        this.isMoveTwo = true
        var list = []
        setTigerBet({
          number: this.dataNumber
        }).then(res => {
          if (res.code !== 200) return this.$ui.toast(res.msg)
          list = res.data.value
          setTimeout(() => {
            this.downOneValue = list[0]
            this.isMoveOne = true
            this.bottomPourStatus = 2
          }, 200)
          setTimeout(() => {
            this.downTwoValue = list[1]
            this.isMoveTwo = true
          }, 400)
          setTimeout(() => {
            this.downThreeValue = list[2]
            this.isMoveThree = true
            this.win = res.data.win
            this.bottomPourStatus = 3
            const prize = res.data.prize
            this.populist = []
            this.populist = Object.keys(prize).map(val => ({
              key: val,
              val: prize[val]
            }))
            this.$nextTick(() => {
              setTimeout(() => {
                this.popuShow1 = true
              }, 5500)
            })
          }, 600)
          setTimeout(() => {
            this.init()
          }, 2000)
        })
        // 对应-1
        // 1：樱桃 2：菠萝 3：数字7 4：香蕉 5：苹果
        // 6：橙子 7：西瓜 8：芒果 9：草莓 10：葡萄
      },
      // 清除
      bottomPourClean() {
        this.bottomPourStatus = 1
        this.downOneValue = ''
        this.downTwoValue = ''
        this.downThreeValue = ''
        this.isMoveOne = false
        this.isMoveTwo = false
        this.isMoveThree = false
        this.dataNumber = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        this.selectGoldList = []
        this.selectGoldList = []
      },
      open() {
        console.log('这是open方法')
      }
    },
    onLoad() {
      setInterval(() => {
        this.isLights++
      }, 500)
      this.init()
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
    }
  }
</script>

<style lang="less">
  .content {
    width: 100%;
    height: 100vh;
    background-image: url('@/static/mine/shake/bg.png');
    background-size: 100% 100%;
    background-repeat: repeat;
    position: relative;

    .content_box {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      width: 100%;
      height: 100vh;
      background: url('@/static/mine/shake/random1.png') no-repeat center;
      background-size: 100% 100%;

      .back {
        position: absolute;
        left: 24rpx;
        width: 100rpx; //大小是153px
        height: 100rpx;
        background-image: url('@/static/mine/game/back.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 10;
      }

      .shake_box_title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32rpx;
        font-family: PingFang SC;
        height: 100rpx;
        line-height: 100rpx;
        color: #fff;
      }

      .set {
        position: absolute;
        right: 24rpx;
        width: 100rpx;
        height: 100rpx;
        background-image: url('@/static/mine/game/info.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 10;
      }

      .shake_content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; //大小 1080px
        height: 1000rpx; //大小 1539px
        background-image: url('@/static/mine/shake/main.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .shake_content_title {
          position: absolute;
          top: 15rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          text-align: center;
          font-size: 28rpx;
          color: #fff;
        }

        .shake_content_border1 {
          position: absolute;
          top: 100rpx;
          left: 0;
          width: 100%;
          height: 340rpx;
          background-image: url('@/static/mine/shake/light1.png'); //大小 1080 509
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .shake_content_border2 {
          position: absolute;
          top: 100rpx;
          left: 0;
          width: 100%;
          height: 340rpx;
          background-image: url('@/static/mine/shake/light2.png'); //大小 1080 509
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .shake_content_one {
          position: absolute;
          top: 200rpx;
          left: 170rpx;
          width: 100rpx;
          height: 168rpx;
          overflow: hidden;

          .win_one_prize {
            position: absolute;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 5040rpx;
            background-image: url('@/static/mine/shake/list.png'); //大小100 1680
            background-size: 100rpx auto;
          }
        }

        .shake_move0 {
          animation: move0 5s ease forwards;
        }
        .shake_move1 {
          animation: move1 5s ease forwards;
        }
        .shake_move2 {
          animation: move2 5s ease forwards;
        }
        .shake_move3 {
          animation: move3 5s ease forwards;
        }
        .shake_move4 {
          animation: move4 5s ease forwards;
        }
        .shake_move5 {
          animation: move5 5s ease forwards;
        }
        .shake_move6 {
          animation: move6 5s ease forwards;
        }
        .shake_move7 {
          animation: move7 5s ease forwards;
        }
        .shake_move8 {
          animation: move8 5s ease forwards;
        }
        .shake_move9 {
          animation: move9 5s ease forwards;
        }

        .shake_content_two {
          position: absolute;
          top: 200rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 100rpx;
          height: 168rpx;
          overflow: hidden;
          .win_one_prize {
            position: absolute;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 5040rpx;
            background-image: url('@/static/mine/shake/list.png'); //大小100 1680
            background-size: 100rpx auto;
            animation-delay:0.5s;
          }
        }

        .shake_content_two_move {
          position: absolute;
          top: 200rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 100rpx;
          height: 168rpx;
          background-image: url('@/static/mine/shake/list.png'); //大小100 1680
          background-size: 100rpx auto;
          background-repeat: no-repeat;
          animation: move 4s steps(10) alternate;
        }

        .shake_content_three {
          position: absolute;
          top: 200rpx;
          right: 170rpx;
          width: 100rpx;
          height: 168rpx;
          overflow: hidden;
          .win_one_prize {
            position: absolute;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 5040rpx;
            background-image: url('@/static/mine/shake/list.png'); //大小100 1680
            background-size: 100rpx auto;
            animation-delay:1.0s;
          }
        }

        .shake_content_three_move {
          position: absolute;
          top: 200rpx;
          right: 170rpx;
          width: 100rpx;
          height: 168rpx;
          background-image: url('@/static/mine/shake/list.png'); //大小100 1680
          background-size: 100rpx auto;
          background-repeat: no-repeat;
          animation: move 6s steps(10);
        }

        @keyframes move0 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -3360rpx;}
        }
        @keyframes move1 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -3528rpx;}
        }
        @keyframes move2 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -3698rpx;}
        }
        @keyframes move3 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -3866rpx;}
        }
        @keyframes move4 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -4034rpx;}
        }
        @keyframes move5 {
          0% {background-position: 0rpx 0rpx; }
          100% {background-position: 0rpx -4202rpx;}
        }
        @keyframes move6 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -4370rpx;}
        }
        @keyframes move7 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -4538rpx;}
        }
        @keyframes move8 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -4706rpx;}
        }
        @keyframes move9 {
          0% {background-position: 0rpx 0rpx;}
          100% {background-position: 0rpx -4874rpx;}
        }

        .card_content {
          position: absolute;
          top: 500rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 570rpx;
          height: 220rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .card_content_ten {
            position: relative;
            width: 100rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .num_black {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 40rpx;
              background-color: rgba(0, 0, 0, 0.6);
              color: #fff;
              font-size: 26rpx;
              text-align: center;
              list-style: 20rpx;
            }
          }
        }

        .gold_content {
          position: absolute;
          top: 750rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 500rpx;
          height: 40rpx;
          // background-color: #fff;
          display: flex;
          justify-content: space-between;

          .gold_content_value {
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border-radius: 10rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            // background-color: #C71585;
            background: linear-gradient(to bottom, #393a90 0%, #0F1173 100%);
            padding: 0 30rpx;
            font-weight: 300;
          }
        }

        .howplay {
          position: absolute;
          left: 24vw;
          transform: translateX(-50%);
          top: 880rpx;
          width: 145rpx; //大小是145px 118px
          height: 118rpx;
          background-image: url('@/static/mine/shake/info.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .bottompour1 {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 880rpx;
          width: 175rpx; //大小是350px 1050px
          height: 175rpx;
          background-image: url('@/static/mine/shake/down.png');
          background-position: 0rpx 0rpx;
          background-size: 175rpx 525rpx;
          background-repeat: no-repeat;
        }

        .bottompour2 {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 880rpx;
          width: 175rpx; //大小是350px 1050px
          height: 175rpx;
          background-image: url('@/static/mine/shake/down.png');
          background-position: 0rpx -175rpx;
          background-size: 175rpx 525rpx;
          background-repeat: no-repeat;
        }

        .bottompour3 {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 880rpx;
          width: 175rpx; //大小是350px 1050px
          height: 175rpx;
          background-image: url('@/static/mine/shake/down.png');
          background-position: 0rpx -350rpx;
          background-size: 175rpx 525rpx;
          background-repeat: no-repeat;
        }

        .clean {
          position: absolute;
          right: 24vw;
          transform: translateX(50%);
          top: 880rpx;
          width: 145rpx; //大小是145px 118px
          height: 118rpx;
          background-image: url('@/static/mine/shake/clear.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .footer_content {
          position: absolute;
          top: 1020rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 80vw;
          height: 80rpx;
          // background-color: #fff;
          display: flex;
          justify-content: space-between;

          .goldtotal {
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 20rpx;
            border-radius: 20rpx;
            background-color: rgba(0, 0, 0, 0.6);
            color: #ffffff;
            font-size: 20rpx;
            font-family: PingFang SC;

            .highlight {
              color: #E9D385;
            }
          }

          .goldwin {
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 20rpx;
            border-radius: 20rpx;
            background-color: rgba(0, 0, 0, 0.4);
            color: #ffffff;
            font-size: 20rpx;
            font-family: PingFang SC;

            .highlight {
              color: #E9D385;
            }
          }
        }
      }
    }

    .popup_content {
      width: 400rpx;
      height: 400rpx;
      border-radius: 20rpx;
      background-color: rgba(126, 109, 246, 1);

      .popup_content_top {
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
        color: #ffffff;
        font-size: 40rpx;
        font-family: PingFang SC;
      }

      .popup_content_middle {
        width: 320rpx;
        height: 200rpx;
        border-radius: 20rpx;
        background-color: rgba(76, 57, 182, 1);
        margin: 0 auto;
        padding: 10rpx 20rpx;
        overflow-y: auto;

        .content_item {
          display: flex;
          justify-content: space-between;
          height: 60rpx;
          line-height: 60rpx;
          color: #ffffff;
          font-size: 20rpx;
          margin-top: 8rpx;
          font-family: PingFang SC;

          .left {
            display: flex;

            .picture {
              width: 60rpx;
              height: 60rpx;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }

            .midddle {
              margin-left: 20rpx;
            }
          }
        }
      }

      .popup_content_bottom {
        width: 360rpx;
        height: 80rpx;
        border-radius: 20rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .bottom {
          width: 160rpx;
        }
      }
    }
  }
</style>
